<template>
  <!-- 边框 -->
  <div style="text-align: center;  border: 1px solid #dcdee2; border-color: #e8eaec;">
    <!-- 说明 -->
    <div style="float:left;position: absolute;margin:3px 0 0 3px">
      <Tooltip :content="description" placement="top-start">
        <Icon type="ios-help" size="22" color="#808695"></Icon>
      </Tooltip>
    </div>
    <!-- 指标 -->
    <div style="padding:15px 0 15px 0">
      <Icon :type="icon" size="22"></Icon>
      <p style="font-size: 26px; font-weight: bold; color: rgb(70, 76, 91);">{{number}}</p>
      <p style="color: rgb(158, 167, 180);">{{title}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "metrics",
    props: {
      description: {
        type: String,
        default: null
      },
      title: {
        type: String,
        default: null
      },
      number: {
        type: String|Number,
        default: null
      },
      icon:{
        type: String,
        default: 'ios-speedometer-outline'
      }
    }
  }
</script>

<style scoped>

</style>
